<template>
  <div class="pre-order">
    <el-card>
      <el-row class="rows1" type="flex" justify="space-between">
        <el-col :span="20">
          <el-form class="searchForm" :model="searchForm" inline size="mini">
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="工厂选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.num"
                placeholder="订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.num"
                placeholder="外协合同号"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.num"
                placeholder="排产流水号"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="产品类别">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="业务员">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <div v-if="expand">
              <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="业务部门">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-date-picker
                  v-model="searchForm.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="交期范围">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="searchForm.num"
                  placeholder="输入排产量"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="排产状态">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </el-col>
        <el-col :span="4" class="rows1-col1">
          <div
            @click="expand = !expand"
            style="cursor: pointer; display: inline-block"
          >
            <span class="expand">{{ expand ? "收起" : "展开" }}</span>
            <i class="expand el-icon-arrow-down" v-if="!expand" />
            <i class="expand el-icon-arrow-up" v-else />
          </div>
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="" size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="select-rows" type="flex" justify="space-between">
      <el-col :span="20">
        <span class="select">已选1项</span>
        <el-button type="primary" plain size="small">
          <img class="icons" src="@/assets/imgs/export.png" alt="" />
          导出报表
        </el-button>
        <el-button
          type="primary"
          plain
          size="small"
          @click="$router.push({ name: 'weeklyPlanDirectorPlaned' })"
        >
          排产
        </el-button>
      </el-col>
      <el-col :span="4" style="text-align: right">
        <el-button type="primary" plain>周计划纠偏</el-button>
      </el-col>
    </el-row>
    <el-card>
      <second-table-list
        :total="total"
        :pageSize="page.pageSize"
        :current="page.page"
        @changePage="changePage"
      >
        <my-table
          slot="table"
          :columns="columns"
          :data="tdata"
          :showSelection="true"
          @selectChange="selectChange"
          :showColumnSetting="true"
          id="0"
        >
          <template slot="table-title">
            <div class="table-title">
              <h1>订单列表</h1>
            </div>
          </template>
          <template v-slot:action="{ row }">
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'weeklyPlanDirectorEdit',
                  query: { id: row.id },
                })
              "
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'weeklyPlanDirectorDetails',
                  query: { id: row.id },
                })
              "
              >详情</el-button
            >
            <el-button type="text">重新排产</el-button>
          </template>
        </my-table>
      </second-table-list>
    </el-card>
  </div>
</template>

<script>
import myTable from "@/components/table/myTable.vue";
import secondTableList from "@/components/table/secondTableList";
export default {
  components: { myTable, secondTableList },
  data() {
    return {
      searchForm: {},
      expand: false,
      header: false,
      tableTail: true,
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },
      columns: [
        {
          label: "排产流水号",
          prop: "num",
          fixed: true,
        },
        {
          label: "订单编号",
          prop: "name",
        },
        {
          label: "外协合同号",
          prop: "name",
        },
        {
          label: "产品大类",
          prop: "name",
        },
        {
          label: "优先级",
          prop: "name",
        },
        {
          label: "业务员",
          prop: "name",
        },
        {
          label: "业务部门",
          prop: "name",
        },
        {
          label: "产品信息",
          prop: "name",
        },

        {
          label: "订单需求量",
          prop: "name",
        },
        {
          label: "批次",
          prop: "name",
        },
        {
          label: "批次需求量",
          prop: "name",
        },
        {
          label: "工厂",
          prop: "name",
        },
        {
          label: "最早上线时间",
          prop: "name",
          sortable: true,
        },
        {
          label: "最早上线时间",
          prop: "name",
          sortable: true,
        },
        {
          label: "最晚下线时间",
          prop: "name",
          sortable: true,
        },
        {
          label: "可生产时间(h)",
          prop: "name",
        },
        {
          label: "加班时间(h)",
          prop: "name",
        },
        {
          label: "排产量(件)",
          prop: "name",
        },
        {
          label: "周别上线时间",
          prop: "clerk",
        },
        {
          label: "面料需求到厂时间",
          prop: "product",
        },
        {
          label: "周别可生产时间(h)",
          prop: "product",
        },
        {
          label: "订单周别最小生产量",
          prop: "product",
        },
        {
          label: "瓶颈工序",
          prop: "secondaryClassification",
        },
        {
          label: "本厂周别可产量",
          prop: "productName",
        },
        {
          label: "周别实际排产量",
          prop: "customerDemand",
        },
        {
          label: "更新日期",
          prop: "customerDemand",
        },
        {
          label: "排产状态",
          prop: "status",
        },
        {
          label: "操作",
          prop: "action",
          fixed: "right",
          width: "300",
          slot: "action",
        },
      ],
      tdata: [],
      selectChangeList: [],
      show: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    changePage(val) {
      this.page = val;
    },
    selectChange(val) {
      console.log(val);
      this.selectChangeList = val;
    },
    columnChange(val) {
      this.columnsSetting = val;
    },
  },
};
</script>

<style scoped lang="scss">
.pre-order {
  width: 100%;
  .rows1 {
    align-items: flex-end;
    .rows1-col1 {
      margin-bottom: 18px;
    }
  }

  .expand {
    margin-right: 10px;
    color: #8fa1c9;
  }
  .select-rows {
    margin: 20px 0;
    .select {
      margin-right: 15px;
    }
  }
}
.table-title {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 20px;
  }
  .right {
    span {
      font-size: 14px;
      color: #8fa1c9;
      margin-right: 10px;
    }
    .el-switch {
      margin-right: 20px;
    }
  }
}
.icons {
  vertical-align: middle;
}
</style>
